<template>
    <div class="password">
        <a-row class="table-up-row">
            <span>
                {{ route.name === 'EditPassword' ? '修改密码' : '重置密码' }}
            </span>
        </a-row>

        <a-row>
            <a-col :span="12" :offset="4">
                <a-form
                    ref="formRef"
                    :model="formState"
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    autocomplete="off"
                    :rules="rules"
                >
                    <template v-if="route.name === 'EditInfo'">
                        <a-form-item label="昵称" name="nickName">
                            <a-input v-model:value="formState.nickName" />
                        </a-form-item>
                        <a-form-item label="手机号" name="phone">
                            <a-input v-model:value="formState.phone" />
                        </a-form-item>
                        <a-form-item label="年龄" name="age">
                            <a-input-number
                                style="width: 100%"
                                min="18"
                                :keyboard="true"
                                v-model:value="formState.age"
                            />
                        </a-form-item>
                        <a-form-item label="性别" name="gender">
                            <a-select style="width: 100%" v-model:value="formState.gender">
                                <a-select-option :value="1">男</a-select-option>
                                <a-select-option :value="0">女</a-select-option>
                            </a-select>
                        </a-form-item>
                    </template>

                    <a-form-item label="原密码" name="password" v-if="route.name != 'EditInfo'">
                        <a-input-password v-model:value="formState.password" />
                    </a-form-item>

                    <template v-if="route.name === 'EditPassword'">
                        <a-form-item label="新密码" name="newPassword">
                            <a-input-password v-model:value="formState.newPassword" />
                        </a-form-item>

                        <a-form-item label="确认密码" name="rePassword">
                            <a-input-password v-model:value="formState.rePassword" />
                        </a-form-item>
                    </template>

                    <a-form-item :wrapper-col="{ offset: 8, span: 24 }">
                        <a-button type="primary" @click="submit" size="large" style="width: 100%"
                            >确认</a-button
                        >
                    </a-form-item>
                </a-form>
            </a-col>
            <a-col :span="6"></a-col>
        </a-row>

        <a-row v-if="route.name === 'ResetPassword'" style="color: #aaaaaa">
            请输入原密码进行验证，进而才能重置
        </a-row>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Lodash from 'lodash'

import { changePwd, editInfo } from './store'
import { toast } from '@/utils/common'
import { getLocal } from '@/utils/localStorage'
import useMainStore from '@/stores'

const defaultFormState = {
    userName: '',
    password: '',
    newPassword: '',
    nickName: '',
    age: '',
    gender: ''
}
export default defineComponent({
    name: 'Password',
    components: {},
    setup() {
        const { getUserInfo } = useMainStore().useUserStore()
        const route = useRoute()
        const router = useRouter()
        const components = {
            formRef: ref() as any
        }
        const constant = {
            rules: {
                newPassword: [{ required: true, message: 'Please input your password!' }],
                rePassword: [{ required: true, message: 'Please input your password!' }],
                nickName: [{ required: true, message: 'Please input your nickName!' }],
                gender: [{ required: true, message: 'Please input your gender!' }],
                age: [{ required: true, message: 'Please input your age!' }],
                phone: [{ required: true, message: 'Please input your phone!' }]
            }
        }
        const state = reactive({
            formState: Lodash.cloneDeep(defaultFormState)
        })

        onMounted(() => {
            getUserInfo(getLocal('token'))
            const { nickName, age, gender, phone } = getLocal('userInfo')
            state.formState = {
                ...state.formState,
                nickName,
                age,
                gender,
                phone
            }
        })
        const methods = {
            async submit() {
                if (
                    state.formState.newPassword &&
                    state.formState.newPassword !== state.formState.rePassword
                ) {
                    toast('error', '', '两次密码不一致！')
                    return
                }
                await components.formRef.value.validateFields()
                const params = Lodash.cloneDeep(state.formState)
                const { userName } = getLocal('userInfo')
                //删除脏数据
                if (route.name === 'ResetPassword') {
                    params.newPassword = '123'
                }
                if (route.name === 'EditInfo') {
                    delete params.newPassword
                    delete params.rePassword
                }
                if (route.name !== 'EditInfo') {
                    delete params.nickName
                    delete params.gender
                    delete params.age
                }

                params.userName = userName
                delete params.rePassword
                const fetchStore = route.name === 'EditInfo' ? editInfo : changePwd
                try {
                    const res = await fetchStore(params)
                    if (res.status === 200) {
                        toast()
                    } else if (res.status === 404) {
                        toast('error', '', '原密码错误')
                    } else if (res.status === 401) {
                        toast('error', '', '数据不完整')
                    }
                    if (route.name !== 'EditInfo') {
                        components.formRef.value.resetFields()
                    } else {
                        let token = getLocal('token')
                        try {
                            getUserInfo(token)
                        } catch (e) {
                            router.push('/login')
                        }
                    }
                } catch (e: any) {
                    console.log(e)
                }
            }
        }
        return {
            ...toRefs(state),
            ...constant,
            ...methods,
            ...components,
            route
        }
    }
})
</script>
<style lang="scss" scoped>
.password {
    width: 100%;
    height: 100% !important;
    background-color: #ffffff;
    padding: 20px;
    .table-up-row {
        margin-bottom: 50px;
    }
}
</style>
